<style>
#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("images/loading_bar.gif") no-repeat center center #fff;
}
</style>
<script>
document.onreadystatechange = function () {
	var path = window.location.href;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);
	var pageUrl		=	path;
	sessionStorage.setItem( 'pageUrl', JSON.stringify(pageUrl) );
  
  var state = document.readyState
  if (state == 'interactive') {
       document.getElementById('contents').style.visibility="hidden";
  } else if (state == 'complete') {
      setTimeout(function(){
	   if(typeof sessionStorage["user_id"]!='undefined'){
			document.getElementById('interactive');
			document.getElementById('load').style.visibility="hidden";
			document.getElementById('contents').style.visibility="visible";
		 }else{
			window.location="index.html";
		 }
      },400);
  }
}
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/webserviceurl.js"></script>
<script src="js/validations.js"></script>
<script src="js/text.js"></script>
<script src="js/commonfunctions.js"></script>
<script src="js/alert.js"></script>
<script src="js/modal.js"></script>
<link href="css/style.css" rel="stylesheet">
<link href="css/default.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script>
$(window).load(function() {
$('#sidemenu').load('side-menu.html');
$('#header').load('header.html');
$('#footer').load('footer.html');
var user_id = JSON.parse(sessionStorage["user_id"]);
$('#user_id').val(user_id);
	if(getParameterByName('ID')!=0){
		reorderOnline(getParameterByName('ID'));
	}else{
		$.ajax({
			type		:	'GET',
			url			:  	 webServiceUrl+'registration/'+user_id,
			dataType	: 	"json",
			success: function(data){
				var countrydetailes;
				var user_statedetailes;
				var statedetailes;
				var obj = eval("(" + data.data + ")");
				$.each(obj, function (index,Object) {
					$('#inputuser').val(Object.user_name);
					$('#inputEmail').val(Object.email);
					$('#inputPh').val(Object.phone);
					$('#txtArea').val(Object.address);
					$('#inputLm').val(Object.landmark);					
					//$('#alterinputPh').val(Object.alterphone);					
				});	
			}
		});
	}
});
</script>
<div id="load"></div>
<div id="contents">
  <div id="header"></div>
    <div class="container-fluid">
      <div class="row-fluid container_bg">
      <div id="sidemenu"></div>
        <div class="span9">
			<div class="container_title">
				<div class=""><h1>Order On-line Medicine</h1></div>
				<div class="container_form_top">
				<form id="orderForm" class="form-horizontal">
					<div class="control-group">
						<label class="control-label" for="inputUser">User Name</label>
						<div class="controls">
						<input type="text" class="span8" id="inputuser" name="inputuser" placeholder="User Name" readonly>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="inputEmail">Email</label>
						<div class="controls">
						<input type="text" class="span8" id="inputEmail" name="inputEmail" placeholder="Email" readonly >
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="inputPh">Land Mark</label>
						<div class="controls">
						<input type="text" class="span8" id="inputLm" name="inputLm" placeholder="Land Mark">
						<span id="errorlandmark" name="errorlandmark" style="color:red"></span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="inputAd">Address</label>
						<div class="controls">
						<textarea rows="3" class="span8" id="txtArea" name="txtArea"></textarea>
						<span id="errorAddress" name="errorAddress" style="color:red"></span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="inputPh">Phone Number</label>
						<div class="controls">
						<input type="text" class="span8" id="inputPh" name="inputPh" placeholder="Phone Number">
						<span id="phoneNumberError" name="phoneNumberError" style="color:red"></span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="inputPh">Alternative Phone Number</label>
						<div class="controls">
						<input type="text" class="span8" id="alterinputPh" name="alterinputPh" placeholder="Phone Number">
						<span id="errorAlterphone" name="errorAlterphone" style="color:red"></span>
						</div>
					</div>
					<div id="Display_images"></div>
					<div class="control-group">
						<label class="control-label" for="inputUp">Upload Prescription</label>
						<div class="controls">
						<input type="file" id="Prescription1" name="Prescription1" class="" data-icon="false" onchange="storeImage(1)">
						<a href="javascript:void(0);" id="btn1" class="addmore">Add Another</a>
						<input type="hidden" id="Prescriptionn1" name="Prescriptionn[]">
						<span id="add"></span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="inputPh">Manual Insert</label>
						<div class="controls" id="reorder_tablets_div">
						<input type="text" class="span4" id="tabletName" name="tabletName[]" placeholder="Ex: Alex Cough Formula (100 ml)">
						<input type="text" class="span2" id="quantity" name="quantity[]" placeholder="Ex:4">
						<a href="javascript:void(0);" id="btn2" class="addmore">Add Another</a>
						<span id="add1"></span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="inputAd">Auto renewal</label>
						<div class="controls">
							<input type="radio" id="autoRenewal1" name="autoRenewal" value="1"> Yes &nbsp;&nbsp;
							<input type="radio" id="autoRenewal0" name="autoRenewal" value="0"> No
							<span id="autoRenewalError" style="color:red"></span>
						</div>
					</div>
					<div class="control-group" style="display:none" id="eachDaysRadio">
						<label class="control-label" for="inputPh">Number of days</label>
						<div class="controls">
						<input type="text" class="span4" id="eachDays" name="eachDays">
						<span id="eachDaysError" style="color:red"></span>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="inputAd">Select Timings</label>
						<div class="controls">
							<input type="radio" id="Timings0" name="Timings" value="0"> Available &nbsp;&nbsp;
							<input type="radio" id="Timings1" name="Timings" value="1"> Immediate
							<span id="timigsError" name="timigsError" style="color:red"></span>
						</div>
					</div>
					<div class="control-group" style="display:none" id="availableRadio">
						<label class="control-label" for="inputPh">Available Timimgs</label>
						<div class="controls">
						<input type="text" class="span4" id="available_time" name="available_time" >
						<span id="available_timeError" name="available_timeError" style="color:red"></span>
						<p>Ex:(11:00am-12:00pm)or(01:00am-02:00am)</p>
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
						<button type="button" class="medicart_btn" onclick="sendOrder()">SAVE</button><span id="orderOnlineReload"></span>
				</fieldset>
						</div>
					</div>
					<input type="hidden" id="user_id" name="user_id">
					<input type="hidden" id="oldorderId" name="oldorderId" value="0">
					<input type="hidden" id="countFiles" name="countFiles" value="2">
					<input type="hidden" id="countFile" name="countFile" value="2">
					<input type="hidden" id="countFileReorder" name="countFileReorder" value="2">
					<input type="hidden" id="hidImages" name="hidImages">
					<input type="hidden" id="hid_value" name="hid_value" value="ORDER">
				</form>
				</div>
			</div>
		<p style="color:red" id="textboxes"></p>
		<p style="color:red" id="textboxess"></p>
         <div><p class="note_c">Note -</p>
		 <p><i class=" icon-arrow-right"></i>&nbsp;You are required to send a scan copy of valid prescription from authorised Doctor which is mandatory.</p>
		<p><i class=" icon-arrow-right"></i>&nbsp;No medicine will be delivered without prescription.</p>
		<p><i class=" icon-arrow-right"></i>&nbsp;A minimum order of Rs 200 is required </p>		 
		 </div>
        </div><!--/span-->
      </div><!--/row-->
    </div><!--/.fluid-container-->
	
<div id="footer"></div>
</div>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
	var num=$('#countFiles').val();
    $("#add").append(" <div id='removediv"+num+"' class='fileremove'><input  id='Prescription"+num+"' name='Prescription"+num+"' type='file' onchange='storeImage("+num+")' class=''/> <a href='javascript:void(0)' id='remove' class='delete' onclick='removediv("+num+");'> Delete </a></div><input type='hidden' id='Prescriptionn"+num+"' name='Prescriptionn[]'>");
	num=parseInt(num)+1;
	$('#countFiles').val(num);
  });
  
  $("#btn2").click(function(){
  var num=$('#countFile').val();
    $("#add1").append('<div id="removediv'+num+'" class="fileremove"><input type="text" class="span4" name="tabletName[]" id="tabletName" placeholder="Ex: Alex Cough Formula (100 ml)"><input type="number" class="span2" name="quantity[]" id="quantity" placeholder="Ex:4"><a href="javascript:void(0)" id="remove" class="delete" onclick="removediv1('+num+');"> Delete </a></div>');
	num=parseInt(num)+1;
	$('#countFile').val(num);
  });
  
  });
  function add(){
	 var num=$('#countFileReorder').val();
    $("#add1").append('<div id="removediv'+num+'" class="fileremove"><input type="text" class="span4" name="tabletName[]" id="tabletName" placeholder="Ex: Alex Cough Formula (100 ml)"><input type="number" class="span2" name="quantity[]" id="quantity" placeholder="Ex:4"><a href="javascript:void(0)" id="remove" class="delete" onclick="removediv1('+num+');"> Delete </a></div>');
	num=parseInt(num)+1;
	$('#countFileReorder').val(num);
  }
$("input[name='autoRenewal']").change(function(){
    if($('input[name=autoRenewal]:checked', '#orderForm').val()==1){
		$('#eachDaysRadio').show();
	}else{
		$('#eachDaysRadio').hide();
	}
});
$("input[name='Timings']").change(function(){
    if($('input[name=Timings]:checked', '#orderForm').val()==0){
		$('#availableRadio').show();
	}else{
		$('#availableRadio').hide();
	}
});
function readImage(file,num) {

    var reader = new FileReader();
    var image  = new Image();

    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
        image.src    = _file.target.result;
		$("#Prescriptionn"+num).val(image.src);
		// url.createObjectURL(file);
        /*image.onload = function() {
            var w = this.width,
                h = this.height,
                t = file.type,                           // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~(file.size/1024) +'KB';
            $('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
        };
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        };*/     
    };

}
function storeImage(num){
    //if(this.disabled) return alert('File upload not supported!');
    var F = $("#Prescription"+num)[0].files;
    if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i],num );
}
  
</script>